<template>
    <div class="media-empty">
        <img src="@/assets/images/designer/dialog-media-dst-empty.png" alt="">
        <h3>Embroidery library</h3>
        <p>
            <ProductEmbDstTip></ProductEmbDstTip>
            <span> format, max 50 MB</span>
        </p>
        <button @click="doUpload()" type="primary">
            <img src="@/assets/images/designer/dialog-media-upload.png" alt="">
            <span>Upload</span>
        </button>
    </div>
</template>

<script>
export default {
    methods: {
        doUpload () {
            this.$emit('doUpload', true)
        },
    },
};
</script>

<style lang="scss" scoped>
.media-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 50px 122px;

    &>img {
        width: 286px;
        height: 286px;
    }

    h3 {
        margin-top: 10px;
        font-size: 28px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 40px;
    }

    p {
        margin-top: 10px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #292929;
        line-height: 18px;
    }

    button {
        width: 140px;
        height: 40px;
        margin-top: 32px;

        img {
            width: 18px;
            height: 18px;
            margin-right: 4px;
        }
    }
}
</style>
